<template>
  <div class="gridContainer detialPage">
    <div class="order-detail-top">
      <div class="order-detail-header">
        <span class="f-l">业务单号：
          <i>{{data.BbMain.BBillNo}}</i>
        </span>
        <em class="f-r" v-if="waitAcc">已完成</em>
      </div>
      <ul class="order-detail-info">
        <li class="displayflex">
          <label>制单日期</label>
          <p class="flex1">{{data.BbMain.BillDate | GetDate}}</p>
        </li>
        <li class="displayflex">
          <label>送货联系人</label>
          <p class="flex1">{{data.Vehicle.Driver1Name}} {{data.Vehicle.Driver1Tel}}</p>
        </li>
        <li class="displayflex" v-if="data.BbMain.ADDT && data.BbMain.ADDT != ''">
          <label>实际驶离时间</label>
          <p class="flex1">{{data.BbMain.ADDT | timeSubSec}}</p>
        </li>
        <li class="displayflex">
          <label>总件数</label>
          <p class="flex1"><em class="font-red">{{data.BbMain.Pkgs}}</em>件</p>
        </li>
      </ul>
    </div>

    <div class="order-detail-top" v-if="exception.length > 0">
      <div style="margin-bottom:10px;" v-for="item in exception">
        <ul class="order-detail-info">
          <li class="displayflex">
            <label>异常原因</label>
            <p class="flex1">{{item.ExceptionMemo || item.Information}}</p>
          </li>
          <li class="displayflex">
            <label>记录时间</label>
            <p class="flex1">{{item.RDate | timeshort}}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="order-detail-con">
      <dl class="displayflex" v-for="item in todolist">
        <dt class="relaImg">
          <img :src="item.PictContent | filterImg">
        </dt>
        <dd class="flex1">
          <p>{{item.GoodsName}}</p>
          <p>{{item.GoodsSpec}}</p>
          <p>{{item.Producer}}</p>
          <p v-if="data.PoMain.State < 81 && data.PoMain.State >= 52">交货数 <i class="red">{{(item.ConPKGS || item.ConPKGS)}}</i> {{item.Unit}}</p>
          <p v-if="data.PoMain.State >= 81">签收数 <i class="red">{{item.RecPKGS}}</i> {{item.Unit}}</p>
          <p>共<i class="red">{{item.Pcks}}</i>{{item.Unit}}</p>
        </dd>
      </dl>
    </div>
    
    <uploader v-if="Img52.length > 0" :title="'提货凭证'" :img-list="Img52" :max="0"></uploader>
    <uploader v-if="Img56.length > 0" :title="'交货凭证'" :img-list="Img56" :max="0"></uploader>
    <uploader v-if="Img81.length > 0" :title="'签收凭证'" :img-list="Img81" :max="0"></uploader>


    <!-- <div class="order-detail-top" v-if="Img52.length > 0">
      <div class="order-detail-header">
        <span class="f-l">提货凭证</span>
      </div>
      <ul class="order-detail-img">
        <li v-for="item in Img52" track-by="$index" @click="zoomPic(item)"><div class="order-img-box"><img :src="item | filterImgUrl"></div></li>
      </ul>
    </div>

    <div class="order-detail-top" v-if="Img56.length > 0">
      <div class="order-detail-header">
        <span class="f-l">交货凭证</span>
      </div>
      <ul class="order-detail-img">
        <li v-for="item in Img56" track-by="$index" @click="zoomPic(item)"><div class="order-img-box"><img :src="item | filterImgUrl"></div></li>
      </ul>
    </div>

    <div class="order-detail-top" v-if="Img81.length > 0">
      <div class="order-detail-header">
        <span class="f-l">签收凭证</span>
      </div>
      <ul class="order-detail-img">
        <li v-for="item in Img81" track-by="$index" @click="zoomPic(item)"><div class="order-img-box"><img :src="item | filterImgUrl"></div></li>
      </ul>
    </div> -->

  </div>
</template>
<script>
import uploader from '@/components/share/imageUploader/imageUploader.vue';

  export default{
    components:{
      uploader,
    },
    data(){
      return{
        data:{
          BbMain:{},
          PoMain:{},
          Vehicle:{},
        },
        todolist:[],
        waitAcc:'',
        exception:[],
        Img52:[],
        Img56:[],
        Img81:[]
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){
        let query = {
          Guid: this.$route.query.Guid
        };
        this.Ajax.post('GetOrderDetail', query).then((res) => {
          if(res.IsSuccess){
            res.Data.PoMain.State = parseInt(res.Data.PoMain.State);
            this.data = res.Data;
            this.todolist = res.Data.BbDetailList;

            this.todolist.forEach((x) => {
              res.Data.VehicleExies.forEach((y) => {
                if(x.GoodsGuid == y.GoodsGuid) {
                  x.ConPKGS = y.ConPKGS;
                }
              })
            })
            console.log(this.todolist);
            this.data.HandoverList.forEach((x, i) => {
              let Obj = {},
                  Json = [];
              Obj = x.HandoverPict !== '' && x.HandoverPict?JSON.parse(x.HandoverPict):{};
              if(Object.keys(Obj).length > 0){
                Json = Json.concat(Obj.bbill?Obj.bbill : []);
                Json = Json.concat(Obj.platenumber?Obj.platenumber : []);
                Json = Json.concat(Obj.invoice?Obj.invoice : []);
                Json = Json.concat(Obj.logistics?Obj.logistics : []);
                switch(x.HandoverType){
                  case '1':
                    this.Img52 = Json;
                    break;
                  case '2':
                    this.Img56 = Json;
                    break;
                  case '3':
                    this.Img81 = Json;
                    if(x.ExpReason && x.ExpReason != '') {
                      let item = {
                        ExceptionMemo: x.ExpReason,
                        RDate: x.HandoverTime,
                      }
                      this.exception.push(item);
                    }
                    break;
                }
              }
            });

            // this.exception = res.Data.Exceptions;
          } else {
            this.Toast(res.ErrorMessage);
          }
        })
        .catch((e) => {
          this.Toast('出错了，请刷新重试')
        })
      },
    }
  }
</script>